<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>weibo热搜</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <style>
      body {
        background-color: #f5f5f5;
      }

      a {
        text-decoration: none;
      }

      .wbpro-side {
        width: 270px;
        /* height: 600px; */
        background-color: #fff;
        margin: 151px 0 0 117px;
        padding: 24px 15px;
      }

      .wbpro-side .wbpro-side-head {
        height: 40px;
        /* background-color: aqua; */
        display: flex;
        align-items: center;
        margin-bottom: 23px;
        border-bottom: 1px solid #f9f9f9;
        cursor: pointer;
      }

      .wbpro-side .wbpro-side-head span.title {
        flex-grow: 1;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #000;
        line-height: 22px;
      }

      .wbpro-side .wbpro-side-head img {
        width: 16px;
        display: block;
        margin-right: 5px;
      }

      .wbpro-side .wbpro-side-head span.sx {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #939393;
        line-height: 22px;
      }

      .wbpro-side .wbpro-side-panel {
        height: 40px;
        border-bottom: 1px solid #f9f9f9;
        display: flex;
        font-size: 12px;
      }

      .wbpro-side .wbpro-side-panel a {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .wbpro-side .wbpro-side-panel a span.title {
        flex-grow: 1;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 4px;
      }

      .marginleft-3 {
        margin-left: -3px;
      }

      .wbpro-side .wbpro-side-panel a span.icon {
        margin-right: 10px;
        font-weight: bold;
        font-size: 16px;
        line-height: 22px;
        color: #ff9406;
      }

      .wbpro-side .wbpro-side-panel:nth-child(-n + 5) a span.icon {
        color: #ff0000;
      }

      .wbpro-side .wbpro-side-panel a span.num {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #939393;
        line-height: 22px;
        margin-right: 5px;
        flex-shrink: 0;
      }

      .wbpro-side .wbpro-side-panel a span.mark {
        font-family: Microsoft YaHei;
        font-size: 12px;
        color: #fff;
        padding: 4px 3px;
        border-radius: 4px;
      }

      .bg1 {
        background-color: #ff9406;
      }

      .bg2 {
        background-color: #ffc0cb;
      }

      .bg3 {
        background-color: #87ceeb;
      }
    </style>
  </head>
  <body>
    <div class="wbpro-side">
      <div class="wbpro-side-head">
        <span class="title">微博热搜</span>
        <img src="images/icon-sx.png" alt="refresh" />
        <span class="sx">点击刷新</span>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon"><img src="./images/icon_top.png" alt="top_image" /></span>
          <span class="title marginleft-3">3分钟了解未来之城雄安3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg1">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">1</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg2">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">2</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg3">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">3</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg1">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">4</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg2">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">5</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg1">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">6</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg1">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">7</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg1">新</span>
        </a>
      </div>

      <div class="wbpro-side-panel">
        <a href="#" title="hot">
          <span class="icon">8</span>
          <span class="title">3分钟了解未来之城雄安</span>
          <span class="num">246万</span>
          <span class="mark bg1">新</span>
        </a>
      </div>
    </div>
  </body>
</html>

<!-- 
3分钟了解未来之城雄安
新的赶考之路考卷常出常新
北京协和医学院
吉林一车主未锁车请大白上..
谷爱凌新朋友淘淘氧棉
男子与朋友楼下聊天被蜜...
宝马x5
王漾的歌手简介有多长
女子做美容醒来发现被刷 
-->
